<template>
	<view>
		<view class="tabsCon solid-bottom ">
			<u-tabs 
			:list="tabsList" 
			bar-width="200" 
			:is-scroll="false"
			:current="currentTab"
			@change="tabChange">
			</u-tabs>
		</view>
		<view class="contentCon" v-show="currentTab == 0">
			<view class="orderCon">
				<view class="flex padding-xs bg-gray">
					<view class="listItem" style="width: 10%;">
						<checkbox-group @change="checkAllChange"><checkbox :value="'all'" :checked="checkAll"></checkbox></checkbox-group>
					</view>
					<view class="listItem" style="width: 40%;">单号</view>
					<view class="listItem" style="width: 20%;">数量</view>
					<view class="listItem" style="width: 30%;">出货日期</view>
				</view>
				<u-empty margin-top="12" :show="waitingListLength == 0" mode="data"></u-empty>
				<checkbox-group @change="checkboxChange">
					<view class="flex padding-xs" v-for="(item, index) in waitingList" :key="item.id">
						<view class="listItem" style="width: 10%;"><checkbox :checked="item.checked" :value="index"></checkbox></view>
						<view class="listItem" style="width: 40%;" @click="openProductInfoModal(item)">{{ item.docno }}</view>
						<view class="listItem" style="width: 20%;" @click="openProductInfoModal(item)">{{ item.num }}</view>
						<view class="listItem" style="width: 30%;" @click="openProductInfoModal(item)">{{ item.dealTime | dateFormateYMD }}</view>
					</view>
				</checkbox-group>
			</view>
		</view>
		<view class="contentCon" v-show="currentTab == 1">
			<view class="orderCon">
				<view class="flex padding-xs bg-gray">
					<view class="listItem" style="width: 50%;">单号</view>
					<view class="listItem" style="width: 20%;">数量</view>
					<view class="listItem" style="width: 30%;">出货日期</view>
				</view>
				<u-empty margin-top="12"  :show="receivedListLength == 0" mode="data"></u-empty>
				<view class="flex padding-xs" v-for="(item, index) in receivedList" :key="item.id">
					<view class="listItem" style="width: 50%;" @click="openProductInfoModal(item)">{{ item.docno }}</view>
					<view class="listItem" style="width: 20%;" @click="openProductInfoModal(item)">{{ item.num }}</view>
					<view class="listItem" style="width: 30%;" @click="openProductInfoModal(item)">{{ item.dealTime | dateFormateYMD }}</view>
				</view>
			</view>
		</view>
		<view class="bottomOpeCon" v-show="currentTab == 0">
			<u-row>
				<u-col span="6" text-align="center">
					<u-button size="medium" @click="singleInstorageBtnClick">
						<text class="cuIcon-lock"></text>
						单锁收货
					</u-button>
				</u-col>
				<u-col span="6" text-align="center">
					<u-button type="success" size="medium" @click="inStorageClick">
						<text class="cuIcon-check"></text>
						确认收货
					</u-button>
				</u-col>
			</u-row>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<productInfoListModal :visible="productInfoModalVisible" :list="productInfoList" @close-modal="closeProductInfoModal"></productInfoListModal>
	</view>
</template>

<script>
import ProductInfoListModal from './components/productInfoListModal/productInfoListModal.vue';
import { mapActions } from 'vuex';
export default {
	components: {
		ProductInfoListModal
	},
	data() {
		return {
			tabsList: [
				{
					name: '待确认订单'
				},
				{
					name: '已收货订单'
				}
			],
			scrollTop:0,
			currentTab: 0,
			curList: [],
			waitingList: [],
			receivedList: [],
			checkAll: false,
			checkedIndex: [],
			productInfoModalVisible: false,
			productInfoList: []
		};
	},
	computed:{
		waitingListLength(){
			return this.waitingList.length
		},
		receivedListLength(){
			return this.receivedList.length
		}
	},
	onLoad() {},
	onShow() {
		this.getList();
	},
	onPageScroll(e){
		this.scrollTop=e.scrollTop;
	},
	methods: {
		...mapActions({
			getOrderList: 'storageOrder/getOrderList',
			updateDeviceByOrder: 'storageOrder/updateDeviceByOrder'
		}),
		getList() {
			this.getOrderList({
				limit: 10000,
				page: 1,
				teamNo:this.$store.state.user.userInfo.teamNo,
				userNo:this.$store.state.user.userInfo.No,
			})
				.then(res => {
					console.log(res);
					if (res && res.code == 0) {
						let list = res.data.list;
						let waitingList = [];
						let receivedList = [];
						list.forEach(e => {
							e.checked = false;
							// this.curList.push(e);
							let isInOrder = false;
							if (e.detail) {
								for (let i = 0; i < e.detail.length; i++) {
									if (e.detail[i].rkZt) {
										isInOrder = true;
										break;
									}
								}
							}
							if (isInOrder) {
								receivedList.push(e);
							} else {
								waitingList.push(e);
							}
						});
						this.waitingList = waitingList;
						this.receivedList = receivedList;
					} else {
						this.waitingList = [];
						this.receivedList = [];
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		tabChange(e) {
			console.log(e);
			this.currentTab = e;
		},
		checkAllChange(e) {
			console.log(e);
			if (e.detail.value.length == 0) {
				this.checkAll = false;
			} else {
				this.checkAll = true;
			}
			let checkedIndex = [];
			this.waitingList.forEach((e, i) => {
				e.checked = this.checkAll;
				if (e.checked) {
					checkedIndex.push(i);
				}
			});
			this.checkedIndex = checkedIndex;
		},
		checkboxChange(e) {
			console.log(e);
			this.checkedIndex = e.detail.value;
		},
		openProductInfoModal(e) {
			console.log(e);
			this.productInfoList = e.detail;
			this.productInfoModalVisible = true;
		},
		closeProductInfoModal() {
			this.productInfoModalVisible = false;
		},
		singleInstorageBtnClick() {
			uni.navigateTo({
				url: '/agentPages/eleAccount/otherInStorage?single=true'
			});
		},
		inStorageClick() {
			if (this.checkedIndex.length == 0) {
				return uni.showToast({
					icon: 'none',
					title: '请选择订单'
				});
			}
			this.$confirm('提示', '确定收货？', this.confirmOrder);
		},
		async confirmOrder() {
			uni.showLoading({
				mask: true,
				title: '请求中'
			});
			for (let i = 0; i < this.checkedIndex.length; i++) {
				let index = this.checkedIndex[i];
				try {
					let res = await this.updateDeviceByOrder({
						docno: this.waitingList[index].docno
					});
				} catch (e) {
					//TODO handle the exception
					continue;
				}
			}
			uni.hideLoading();
			this.waitingList = [];
			this.receivedList = [];
			this.getList();
		}
	}
};
</script>

<style lang="less">
@import './styles/layout.less';
@import './styles/table.less';
</style>
